<template>
  <div id="main" style="height: 350px"></div>
  <div id="china" style="height: 500px"></div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
import { getHomeDataApi } from "./api";
import chinaJson from "@/chinaJson/china.json";
type EChartsOption = echarts.EChartsOption;

onMounted(() => {
  var chartDom = document.getElementById("main")!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;
  let data: any = {};
  getHomeDataApi().then((res) => {
    data = res.data.salePie.map((item) => ({
      name: item.name,
      value: item.sale_yesterday,
    }));
    // console.log(data);
    option = {
      tooltip: {
        trigger: "item",
        backgroundColor:"rgba(0,0,0,.6)",
        textStyle:{
            color:"#fff"
        },
        formatter:"{b}:{c}({d}%)"
      },
      legend: {
        orient: "vertical",
        left: "right",
        height: "100",
      },
      series: [
        {
          type: "pie",
          radius: ["30%", "60%"],
          data,
        },
      ],
    };
    option && myChart.setOption(option);
  });
  var mapDom = document.getElementById("china")!;
  var mapChart = echarts.init(mapDom);
  echarts.registerMap("china", chinaJson as any);
  mapChart.setOption(
    (option = {
      tooltip: {
        trigger: "item",
        formatter: "{b}<br/>{c} (p / km2)",
      },
      toolbox: {
        show: true,
        orient: "vertical",
        left: "right",
        top: "center",
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {},
        },
      },
      visualMap: {
        min: 800,
        max: 50000,
        text: ["High", "Low"],
        realtime: false,
        calculable: true,
        inRange: {
          color: ["lightskyblue", "yellow", "orangered"],
        },
      },
      series: [
        {
          type: "map",
          map: "china",
          label: {
            show: true,
          },
          data: [
            { name: "中西区", value: 20057.34 },
            { name: "湾仔", value: 15477.48 },
            { name: "东区", value: 31686.1 },
            { name: "南区", value: 6992.6 },
            { name: "油尖旺", value: 44045.49 },
            { name: "深水埗", value: 40689.64 },
            { name: "九龙城", value: 37659.78 },
            { name: "黄大仙", value: 45180.97 },
            { name: "观塘", value: 55204.26 },
            { name: "葵青", value: 21900.9 },
            { name: "荃湾", value: 4918.26 },
            { name: "屯门", value: 5881.84 },
            { name: "元朗", value: 4178.01 },
            { name: "北区", value: 2227.92 },
            { name: "大埔", value: 2180.98 },
            { name: "沙田", value: 9172.94 },
            { name: "西贡", value: 3368 },
            { name: "离岛", value: 806.98 },
          ],
        },
      ],
    })
  );
});
</script>

<style lang="scss" scoped></style>
